<script setup lang="ts">
import SearchRecord from "../../findProduct/components/search-record.vue";
import SelectNav from "../../components/selectNav/index.vue";
import videoList from "../../components/videoList/videoList.vue";
import dataComcern from "../../components/detaiConcern/index.vue";
import { PageProps } from "@/hooks/usePage";
import { videoPage } from "@/api/video";
const list = [
  {
    text: "视频",
  },
  {
    text: "用户",
  },
];
const MeScrollPageREF = ref();
const videoListREF = ref();
const waterResetLoad = () => {
  nextTick(() => {
    videoListREF.value.waterfallREF.resetLoadmore();
  });
};
const page = reactive<PageProps>({
  params: {
    bizType: 1, // 	业务类型：1.视频 2.用户
    search: "",
    size: 20,
  },
  fetchData: videoPage,
  beforeLoadingFn: waterResetLoad,
});

const search = (e) => {
  page.params.search = e.detail.value;
  MeScrollPageREF.value.resetData();
};

const clearFn = () => {
  page.params.search = "";
  MeScrollPageREF.value.resetData();
};

const changeType = (row: any) => {
  page.data = [];
  if (row.index == 1) {
    page.beforeLoadingFn = waterResetLoad;
  } else {
    page.beforeLoadingFn = null;
  }

  page.params.bizType = row.index;
  MeScrollPageREF.value.resetData();
};
</script>

<template>
  <view>
    <wxTopStatus backgroundColor="#fff"> </wxTopStatus>
    <view>
      <fui-search-bar
        background="#fff"
        inputBackground="#f5f5f5"
        :isLeft="true"
        @search="search"
        radius="999"
        placeholder="搜索视频"
        @clear="clearFn"
        @close="clearFn"
      ></fui-search-bar>

      <SearchRecord type="3" v-if="false"></SearchRecord>

      <view class="search-content" v-else>
        <SelectNav
          v-model="page.params.bizType"
          :list="list"
          @change="changeType"
        ></SelectNav>
      </view>

      <MeScrollPage type="body" ref="MeScrollPageREF" :page="page">
        <template v-if="page.params.bizType === 1">
          <videoList ref="videoListREF" :data="page.data"></videoList>
        </template>

        <template v-else>
          <view class="flex-column gap-[20rpx] px-[30rpx]">
            <dataComcern
              v-for="item in page.data"
              :key="item"
              :info="{
                userAvatar: item.avatar,

                // 'https://tse1-mm.cn.bing.net/th/id/OIP-C._YFRagbOM8FbGUSUJy-m6QAAAA?w=217&h=217&c=7&r=0&o=5&pid=1.7',
                userNickname: item.nickname,
                ...item,
              }"
              :idName="item.type == 1 ? 'uid' : 'factoryId'"
              userIdKey="id"
              @reGetData="MeScrollPageREF.resetData()"
            ></dataComcern>
          </view>
        </template>
      </MeScrollPage>
    </view>
  </view>
</template>

<style scoped lang="scss">
.search-content {
  padding: 20rpx 100rpx 30rpx;
}
</style>
